<template>
  <div>
    <a-button class="refresh" @click="refresh" v-show="showfresh">点击刷新</a-button>
    <div class="ant-pro-pages-list-projects-cardList" style="clear:both;">
      <a-list :loading="loading" :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
          <div class="look-title">
            <a-button type="primary" icon="plus" :loading="item.iconLoading" @click="addLook(item, index)" size="small"></a-button>
            NO.{{ index + 1 }} &nbsp;&nbsp;
            <!-- {{ item.inside_name }} -->
          </div>
          <div @tabChange="cardChange" class="look-box">
            <div class="look-cover">
              <img :src="item.pre_img" :alt="item.box_name" />
              <span class="score">{{ (item.total_score * 10).toFixed(1) }}</span>
            </div>
            <div class="goods-list">
              <a-card class="ant-pro-pages-list-projects-card" v-for="(listItem, listIndex) in item.list" :key="listIndex" @tabChange="cardChange" :bordered="false">
                <img slot="cover" :src="listItem.imageurl != null ? listItem.imageurl : 'https://img.bzhz.jnbygroup.com/cloth.png'" :alt="item.value" @click="open(listItem)" />
                <p>款号：{{ listItem.name }}</p>
                <span class="score">{{ (listItem.score * 10).toFixed(1) }}</span>
                <div class="cardItemContent">
                  <h3>{{ listItem.brand }} {{ listItem.value }}</h3>
                  <p class="red">吊牌价:¥{{ listItem.pricelist }}.00</p>
                  <p class="blue">库存：{{ listItem.stock }}</p>
                  <p>{{ listItem.mark_style }}</p>
                  <p>{{ listItem.colors_code }}/{{ listItem.colors }} {{ listItem.m_size }}</p>
                </div>
              </a-card>
            </div>
          </div>
          <div>
            评价：
            <p class="description">{{ item.description }}</p>
          </div>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>
<script>
import { aiLook, addBatchStylingCart, createLook, queryStylingTpl, goodsDetail } from '@/api/box/workbench'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  props: {
    outNo: {
      type: String,
      default: ''
    },
    unionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: [],
      loading: true,
      value: null,
      radioStyle: {
        fontSize: '24px',
        fontWeight: 500,
        display: 'flex',
        lineHeight: '34px',
        alignItems: 'center',
        marginBottom: '14px'
      },
      checkedValues: [],
      userInfo: Vue.ls.get(USER_INFO),
      lookData: [],
      showfresh: false
    }
  },
  watch: {
    outNo(value, oldvalue) {
      console.log(value, oldvalue)
    },
    unionId(value, oldvalue) {
      console.log(value, oldvalue)
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    cardChange(key) {
      console.log(key)
    },
    getList() {
      const data = {
        requestData: {
          unionId: this.unionId // 'oZpUxs1utN7-JLtQAD5AMcW_nIPM'
        }
      }
      aiLook(data)
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            this.data = res.data.map(item => {
              const iconLoading = false
              return {
                ...item,
                iconLoading
              }
            })
            this.loading = false
          } else if (res.code === 1001) {
            this.loading = false
            this.showfresh = true
          } else {
            this.loading = false
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 检查目前look套数
    queryStylingTpl() {
      const data = {
        page: {
          pageNo: 1,
          pageSize: 100
        },
        requestData: {
          outNo: this.outNo,
          unionId: this.unionId
        },
        user_id: this.userInfo.id
      }
      return queryStylingTpl(data)
        .then(res => {
          if (res.code === 0) {
            this.lookData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('查询look列表:' + err)
        })
    },
    // 批量添加look商品
    async addLook(item, index) {
      try {
        console.log(item, index)
        await this.queryStylingTpl()
        if (this.lookData.length >= 4) {
          this.$message.warning('最多3个LOOK！')
        } else {
          const emptyStock = item.list.filter(value => value.stock <= 0)
          console.log(emptyStock)
          if (emptyStock.length === item.list.length) {
            this.$message.error('该LOOK所有商品库存为0！')
          } else {
            item.iconLoading = true
            const list = []
            for (var i = 0; i < item.list.length; i++) {
              if (item.list[i].stock > 0) {
                const newItem = {
                  colorName: item.list[i].colors,
                  colorNo: item.list[i].colors_code,
                  imgUrl: item.list[i].imageurl,
                  price: item.list[i].pricelist,
                  productCode: item.list[i].name,
                  productId: item.list[i].m_product_id,
                  productName: item.list[i].value,
                  sizeName: item.list[i].m_size,
                  sizeNo: item.list[i].recom_size,
                  skuCode: item.list[i].no,
                  skuId: item.list[i].m_productalias_id,
                  unionId: item.list[i].unionid
                }
                list.push(newItem)
              }
            }
            /* const list = item.list.fliter(value => {
              if (value.stock > 0) {
                const newItem = {
                  colorName: value.colors,
                  colorNo: value.colors_code,
                  imgUrl: value.imageurl,
                  price: value.pricelist,
                  productCode: value.name,
                  productId: value.m_product_id,
                  productName: value.value,
                  sizeName: value.m_size,
                  sizeNo: value.recom_size,
                  skuCode: value.no,
                  skuId: value.m_productalias_id,
                  unionId: value.unionid
                }
                return newItem
              }
            }) */
            console.log(list)
            const data = {
              requestData: list,
              user_id: this.userInfo.id
            }
            addBatchStylingCart(data)
              .then(res => {
                // console.log(res)
                if (res.code === 0) {
                  this.$message.success(res.msg)
                  this.createLook(item)
                } else {
                  this.$message.error(res.msg, 5)
                }
                item.iconLoading = false
              })
              .catch(err => {
                console.log('添加商品' + err)
              })
          }
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 创建look
    createLook(item) {
      console.log(item)
      const stylingBase = {
        content: item.description,
        name: item.box_name,
        outNo: this.outNo,
        type: 1,
        unionId: item.list[0].unionid
      }
      const stylingDetails = []
      for (var i = 0; i < item.list.length; i++) {
        const value = item.list[i]
        if (value.stock > 0) {
          const newItem = {
            colorName: value.colors,
            colorNo: value.colors_code,
            imgUrl: value.imageurl,
            productCode: value.name,
            productId: value.m_product_id,
            productName: value.value,
            sizeName: value.m_size,
            sizeNo: value.recom_size,
            skuId: value.m_productalias_id,
            stylingBaseId: value.look_id,
            type: 1
          }
          stylingDetails.push(newItem)
        }
      }
      /* const stylingDetails = item.list.map(value => {
        if (value.stock > 0) {
          const newItem = {
            colorName: value.colors,
            colorNo: value.colors_code,
            imgUrl: value.imageurl,
            productCode: value.name,
            productId: value.m_product_id,
            productName: value.value,
            sizeName: value.m_size,
            sizeNo: value.recom_size,
            skuId: value.m_productalias_id,
            stylingBaseId: value.look_id,
            type: 1
          }
          return newItem
        }
      }) */
      console.log(stylingDetails)
      const data = {
        requestData: {
          stylingBase: stylingBase,
          stylingDetails: stylingDetails
        },
        user_id: this.userInfo.id
      }
      console.log(data)
      createLook(data)
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            this.$emit('refreshShoppingCart', true)
          }
        })
        .catch(err => {
          console.log('createLook' + err)
        })
    },
    // 查看商品信息
    open(item) {
      console.log(item)
      const data = {
        requestData: {
          productId: item.m_product_id,
          skuId: item.m_productalias_id
        }
      }
      goodsDetail(data)
        .then(res => {
          if (res.code === 0) {
            this.$emit('openInfo', true, res.data, '单品')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('查看商品信息:' + err)
        })
      // this.$emit('openInfo', true, item, 'look')
    },
    // 刷新
    refresh() {
      this.showfresh = false
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.ant-pro-pages-list-projects-cardList {
  height: 100%;
  padding-top: 2px;
  // overflow-y: auto;
  // overflow-x: hidden;
  /deep/ .ant-list {
    width: 100%;
    min-height: 65vh;
  }
  /deep/ .ant-list-item {
    margin-bottom: 35px;
    display: block;
    border-bottom: none;
    padding: 0;
    .ant-card-hoverable {
      cursor: default;
    }
    .description {
      background: #f6f6f6;
      border-radius: 4px;
      font-size: 14px;
      color: #848484;
      line-height: 32px;
      padding: 6px 16px;
      margin-top: 14px;
      word-wrap: break-word;
    }
  }
  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }
  .look-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    button {
      margin-right: 12px;
    }
  }
  .look-box {
    display: flex;
    flex-wrap: wrap;
    .look-cover {
      width: 339px;
      height: 254px;
      background: #f6f6f6;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 40px;
      position: relative;
      text-align: center;
      img {
        object-fit: scale-down;
        height: 100%;
        width: 100%;
      }
      .score {
        background: #1890ff;
        color: #fff;
        font-size: 12px;
        display: block;
        position: absolute;
        z-index: 2;
        width: 37px;
        height: 18px;
        border-radius: 4px;
        text-align: center;
        line-height: 18px;
        top: 6px;
        right: 6px;
      }
    }
    .goods-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: calc(100% - 379px);
      .ant-card {
        margin-right: 24px;
        margin-bottom: 24px;
        min-width: 140px;
        padding: 16px;
        border: 1px solid #e8e8e8;
      }
      .ant-card:last-child {
        margin-right: 0;
      }
    }
  }

  /deep/ .ant-card-cover {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      border-radius: 4px;
    }
  }
  /deep/ .ant-card-body {
    position: relative;
    padding: 0;
    .ant-card-body::before,
    .ant-card-body::after {
      display: none;
    }
    > p {
      margin-top: -30px;
      background: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      border-radius: 0 0 4px 4px;
    }
    .score {
      background: #1890ff;
      color: #fff;
      font-size: 12px;
      display: block;
      position: absolute;
      z-index: 2;
      width: 37px;
      height: 18px;
      border-radius: 4px;
      text-align: center;
      line-height: 18px;
      top: -140px;
      right: 0px;
    }
  }
  .cardItemContent {
    line-height: 20px;
    padding: 0;
    > p {
      color: #cdcdcd;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 0;
    }
    > h3 {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 0;
    }
    .red {
      color: #f45555;
      font-size: 14px;
      line-height: 26px;
    }
    .blue {
      color: #1890ff;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
  /deep/ .ant-list-pagination {
    margin-top: 0;
  }
}
.ant-checkbox-group {
  width: 100%;
}
.refresh {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 200px;
  z-index: 3;
}
</style>
